<template>
	<nav-header title="上传相册">
		<template v-slot:right>
			<view class="nav-edit">
				<!-- <text>保存</text> -->
			</view>
		</template>
	</nav-header>
	<view class="content">
		<view class="header">
			<text>共{{imgList.length}}张照片</text>
			<view>
				<text>剩余数量：{{imgList.length}}/30</text>
				<text class="expandText" @click="expand">扩容</text>
			</view>
		</view>
		<!-- 图片展示区 -->
		<view class="img">
			<view class="publish-img">
				<view v-for="(item,index) in imgList" :key="index">
					<view class="img-container">
						<up-image :show-loading="true" :src="item.picture" width="155rpx" height="155rpx"
							@click="previewImage(item.picture)"></up-image>
						<!-- <img :src="item.picture" alt="" class="pimg" @click="previewImage(index)"> -->
						<view class="imgclose"><up-icon name="close-circle-fill" size="19"
								@click="deleteImg(item,index)"></up-icon></view>
					</view>
				</view>
				<image-upload :onSuccess="onUnloadImageSuccess" class="publish-img" v-if="imgList.length < maxSize">
					<view class="icon-plus">
						<up-icon name="plus" size="50"></up-icon>
					</view>
				</image-upload>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				maxSize: 30,
				companyId: null,
				groupId: null
			};
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			expand() {
				console.log('扩容')
			},
			deleteImg(item, index) {
				console.log(item.id)
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个照片吗？',
					success: (res) => {
						if (res.confirm) {
							if (this.groupId) {
								this.$http({
									url: "/group/picture/remove",
									method: "POST",
									data: [item.id]
								}).then(() => {
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
								})
							} else if (this.companyId) {
								this.$http({
									url: `/company/picture/${[item.id]}`,
									method: "POST"
								}).then(() => {
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
								})
							}
							for (let i = this.imgList.length - 1; i >= 0; i--) {
								if (i === index) {
									this.imgList.splice(index, 1);
								}
							}
						}
					}
				});
			},
			onUnloadImageSuccess(file, res) {
				if (this.companyId) {
					this.$http({
						url: '/company/picture',
						method: "post",
						data: {
							companyId: this.companyId,
							picture: res.data.originUrl
						}
					}).then(res => {
						this.getImageList()
					})
				} else if (this.groupId) {
					this.$http({
						url: '/group/picture/add',
						method: "post",
						data: {
							groupId: this.groupId,
							picture: res.data.originUrl
						}
					}).then(res => {
						this.getImageList()
					})
				}
			},
			getImageList() {
				if (this.companyId) {
					this.$http({
						url: `/company/picture/list/${this.companyId}`,
						method: "get",
					}).then(res => {
						this.imgList = res.list
					})
				} else if (this.groupId) {
					this.$http({
						url: `/group/picture/list/${this.groupId}`,
						method: "get"
					}).then(res => {
						this.imgList = res
					})
				}

			}
		},
		onLoad(options) {
			this.companyId = options.companyId
			this.groupId = options.groupId
			this.getImageList()
		}
	};
</script>

<style lang="less" scoped>
	.content {
		widows: 100%;
		padding: 20rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #616161;
	}

	.expandText {
		color: #d90000;
		margin-left: 20rpx;
	}

	.img {
		// margin-left: 10px;
		margin-top: 30px;
	}

	.publish-img {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.icon-plus {
		width: 155rpx;
		height: 155rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		background-color: #f2f2f2;
		/* 浅灰色背景色 */
		margin-top: 10rpx;

	}

	.pimg {
		width: 155rpx;
		height: 155rpx;
		padding: 10rpx;
		position: relative;
	}

	.img-container {
		position: relative;
		width: 165rpx;
	}

	.imgclose {
		position: absolute;
		top: -15rpx;
		left: 135rpx;
	}
</style>